.app-sidebar {
  a {
    .ellipsis();
  }
  li {
    list-style-type: none;
  }
  .widget-title {
    position: relative;
    border-radius: 5px 5px 0 0;
    margin-bottom: 5px;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    padding: 5px 0 10px;
    background-color: #57585e;
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 7px;
      bottom: 0;
      left: 0;
      background: url("../img/skin1_me_before.png") repeat-x;
    }
    span:before, span:after {
      content: '';
      position: absolute;
      top: 50%;
      width: 8px;
      height: 8px;
      z-index: 1;
      background-color: #45464A;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) inset;
      border-radius: 50%;
      transform: translate(0,-50%);
    }
    span:before {
      left: 10px;
    }
    span:after {
      right: 10px;
    }
  }
  .widget-text {
    border-top: 1px solid #56585C;
    background: #46474B;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    .top {
      display: block;
      width: 100%;
      border-radius: 5px 5px 0 0;
    }
    .photo {
      display: block;
      width: 50px;
      height: 50px;
      margin: 15px auto 5px;
      padding: 6px;
      border: 4px solid rgba(0, 0, 0, 0.3);
      border-radius: 50%;
    }
    .content {
      line-height: 1.5;
      font-size: 14px;
      padding: 10px;
      text-shadow: rgba(0, 0, 0, 0.85) 0 1px 0;
      a {
        color: #75B6E6;
        &:hover {
          text-decoration: underline;
        }
      }
      .audio {
        display: inline-block;
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        margin-top: 8px;
      }
    }
    .social {
      font-size: 0;
      &:before {
        content: '';
        display: block;
        border-top: dashed 1px #29292D;
        border-bottom: dashed 1px #64656C;
      }
      span {
        position: relative;
        display: inline-block;
        width: 33.33%;
        transition: 150ms all linear 0ms;
        text-align: center;
        &:hover {
          background-color: rgba(0,0,0,.6);
        }
        &:before {
          font-size: 22px !important;
        }
        &:hover:before {
          color: #fff;
        }
        &:after {
          position: absolute;
          bottom: 100%;
          width: 300%;
          font-size: 16px;
          opacity: 0;
          visibility: hidden;
          background-color: #000;
          color: #d6dadd;
          border-radius: 5px 5px 0 0;
          transition: 150ms all linear 0ms;
        }
        &:hover:after {
          opacity: 1;
          visibility: visible;
        }
      }
      .qq {
        &:before {
          content: "\f1d6";
          font-family: FontAwesome;
          margin-right: 10px;
          font-size: 14px;
          left: 0;
        }
        border-radius: 0 0 0 5px;
        &:after {
          content: 'QQ：821135564';
          left: 0;
        }
      }
      .wechat {
        &:before {
          content: "\f1d7";
          font-family: FontAwesome;
          margin-right: 10px;
          font-size: 14px;
          left: 0;
        }
        &:after {
          content: '微信：OrzZone';
          left: 50%;
          transform: translate(-50%,0);
        }
      }
      .email {
        &:before {
          content: "\f199";
          font-family: FontAwesome;
          margin-right: 10px;
          font-size: 14px;
          left: 0;
        }
        border-radius: 0 0 5px 0;
        &:after {
          content: 'cleveryun@163.com';
          right: 0;
        }
      }
    }
  }
  .widget-normal {
    margin-top: 15px;
    border-top: 1px solid #56585C;
    background: #46474B;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    ul {
      padding: 10px;
      font-size: 0;
    }
    li {
      display: inline-block;
      width: 50%;
      font-size: 14px;
      margin-bottom: 6px;
    }
    a {
      text-shadow: #000 0 1px 0;
      color: #d6dadd;
      &:hover {
        color: #fff;
      }
    }
    .categories li {
      &:before {
        content: "\f097";
        font-family: FontAwesome;
        margin-right: 10px;
        font-size: 14px;
        left: 0;
      }
    }
    .archives li {
      &:before {
        content: "\f115";
        font-family: FontAwesome;
        margin-right: 10px;
        font-size: 14px;
        left: 0;
      }
    }
    .links li {
      &:before {
        content: "\f0c1";
        font-family: FontAwesome;
        margin-right: 10px;
        font-size: 14px;
        left: 0;
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .app-sidebar {
    .widget-normal {
      .list {
        width: 20%;
      }
    }
  }
}
@media screen and (min-width: 622px) and (max-width: 767px) {
  .app-sidebar {
    .widget-normal {
      .list {
        width: 25%;
      }
    }
  }
}
@media screen and (min-width: 484px) and (max-width: 621px) {
  .app-sidebar {
    .widget-normal {
      .list {
        width: 33%;
        &:nth-of-type(3n+2) {
          width: 34%;
        }
      }
    }
  }
}
@media screen and (max-width: 483px) {
  .app-sidebar {
    .widget-normal {
      .list {
        width: 50%;
      }
    }
  }
}